<template>
  <div>
    <el-form :model="basicInfo" :rules="rules" ref="basicInfo" label-width="100px">
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>新增模块管理</h4>
          <el-form-item label="所属系统" required >
            <el-radio-group v-model="basicInfo.system" @change="systemChange">
              <el-radio label="1">订货系统</el-radio>
              <el-radio label="2">款台系统</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所属广告" required >
            <el-radio-group v-model="basicInfo.ad">
              <el-radio v-if="basicInfo.system === '1'" label="1">BANNER</el-radio>
              <el-radio v-if="basicInfo.system === '1'" label="2">开机广告</el-radio>
              <el-radio v-if="basicInfo.system === '1'" label="3">页面广告</el-radio>
              <el-radio v-if="basicInfo.system === '2'" label="4">款台广告</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所属设备" required >
            <el-checkbox v-show="basicInfo.system === '1'" v-model="checkAll" :indeterminate="isIndeterminate" @change="checkBoxChangeAll" style="float:left;margin-right:15px;">全选</el-checkbox>
            <el-checkbox-group v-show="basicInfo.system === '1'" v-model="checkBusinessType" @change="checkBoxChange" style="float:left">
              <el-checkbox v-for="(item, index) in businessTypeGroup" :label = "item" :key="index">{{item}}</el-checkbox>
            </el-checkbox-group>
            <el-radio v-show="basicInfo.system === '2'" label="4" v-model="radioBusinessType">惠付通-款台</el-radio>
          </el-form-item>
          <el-form-item label="动作标识" required prop="markId">
            <el-input v-model="basicInfo.markId" placeholder="动作标识ID" style="width:220px">
              <template slot="prepend">HMC0</template>
            </el-input>
          </el-form-item>
          <el-form-item label="模块名称" prop="name">
            <el-input v-model="basicInfo.name" placeholder="模块名称" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="模块说明">
            <el-input v-model="basicInfo.memo" placeholder="动作说明" style="width:220px"></el-input>
          </el-form-item>
        </div>
      </div>
      <div style="margin: 20px auto 20px; width: 20%">
        <el-button @click="onSubmit('basicInfo')" type="success">提交</el-button>
        <el-button @click="cancel(menuId, 1)" type="danger">取消</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import { gggl } from '../../../config/proxy.js'
  export default {
    data () {
      var checkReturnTimes = (rule, value, callback) => { // 验证反多少次
        if (!value) {
          return callback(new Error('动作标志不能为空'))
        } else {
          var re = /^[0-9]\d*$/
          if (!re.test(value)) {
            callback(new Error('请输入正整数'))
          } else {
            callback()
          }
        }
      }
      return {
        basicInfo: {
          system: '1', // 所属系统
          ad: '1', // 所属广告
          equipment: ['1'], // 所属设备
          markId: '', // 动作标识
          name: '', // 动作名称
          memo: '', // 动作说明
          state: 1 // 状态
        },
        checkBusinessType: ['PC订货'], // 所属设备 checkbox
        radioBusinessType: '4', // 所属设备radio
        isIndeterminate: true, // 控制选中样式
        checkAll: true, // 全选
        businessTypeGroup: ['PC订货', '惠付通', '惠配通'], // 所属设备订货系统
        detailGroup: '',
        isCreateOrUpdate: '',
        menuId: '',
        text: '',
        rules: {
          markId: [
            {validator: checkReturnTimes, trigger: 'blur'}
          ],
          name: [
            { required: true, message: '请输入模块名称', trigger: 'blur, change' }
          ]
        }
      }
    },
    methods: {
      systemChange (val) { // 所属系统change事件
        if (val === '1') {
          console.log(this.basicInfo.ad)
          this.basicInfo.ad = '2'
          this.checkBusinessType = ['PC订货']
          // this.checkBoxChangeAll()
          this.basicInfo.equipment = ['1']
          this.isIndeterminate = true // 控制选中样式
          this.checkAll = true // 全选
        } else {
          this.basicInfo.ad = '1'
          this.basicInfo.equipment = ['4']
        }
        console.log(this.basicInfo)
      },
      checkBoxChangeAll (event) { // 全选
        console.log(event.target.checked)
        this.checkBusinessType = event.target.checked ? this.businessTypeGroup : []
        this.isIndeterminate = false
        this.matchBusinessType()
        // console.log(this.checkBusinessType)
      },
      checkBoxChange (val) { // 选中每个checkbox change事件
        let checkedCount = val.length
        // console.log(this.checkBusinessType)
        this.checkAll = checkedCount === this.businessTypeGroup.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.businessTypeGroup.length
        this.matchBusinessType()
      },
      matchBusinessType () { // 匹配 checkbox 数值
        var group = [
          {name: 'PC订货', value: '1'},
          {name: '惠付通', value: '2'},
          {name: '惠配通', value: '3'}
        ]
        var arr = []
        for (let i = 0; i < this.checkBusinessType.length; i++) {
          const checkEle = this.checkBusinessType[i]
          for (let k = 0; k < group.length; k++) {
            const allEle = group[k]
            if (checkEle === allEle.name) {
              arr.push(allEle.value)
            }
          }
        }
        this.basicInfo.equipment = arr
        console.log(this.basicInfo.equipment)
      },
      searchDetail (row) { // 查询详情
        // console.log(row)
        gggl.mkgl.detail({mid: row.mid}, (res) => {
          console.log(res)
          if (res.message === 'ok') {
            this.detailGroup = res.content
            this.basicInfo.system = this.detailGroup.system.toString()
            this.basicInfo.ad = this.detailGroup.ad.toString()
            if (this.basicInfo.system === '1') {
              this.basicInfo.equipment = this.detailGroup.equipments
              this.checkBusinessType = this.detailGroup.equipmentName.split(',')
            }
            this.basicInfo.markId = this.detailGroup.markId.slice(4).toString()
            this.basicInfo.name = this.detailGroup.name
            this.basicInfo.memo = this.detailGroup.memo
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      getMarkId () { // 获取动作标识
        gggl.mkgl.getMarkId('', (res) => {
          if (res.message === 'ok') {
            this.basicInfo.markId = res.content.slice(4)
          } else {
            this.message('查询动作标识失败', 'error')
          }
        })
      },
      onSubmit (formName) { // 创建或更新
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var _data = this.basicInfo
            // _data.createUser = this.isCreateOrUpdate === 'create' ? this.userName : this.detailGroup.createUser
            // _data.updateUser = this.isCreateOrUpdate === 'updated' ? this.userName : ''
            _data.markId = 'HMC0' + _data.markId
            console.log(this.detailGroup)
            _data.mid = this.isCreateOrUpdate === 'update' ? this.detailGroup.mid : ''
            console.log(_data)
            gggl.mkgl[this.isCreateOrUpdate](_data, (res) => {
              console.log(res)
              if (res.message === 'ok') {
                this.cancel(this.menuId)
                this.message(this.text + '成功', 'success')
                this.$store.dispatch('mkglState', this.$store.state.updateState.mkglState + 1)
              } else {
                this.message(this.text + '失败', 'error')
              }
            })
          }
        })
      },
      cancel (id, num) { // 取消
        if (num) {
          this.$confirm('确定要取消？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('delTab', {id: id})
          }).catch(() => {
          })
        } else {
          this.$store.dispatch('delTab', {id: id})
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    computed: {
      update_state: function () {
        // console.log(state.updateState.dhmState)
        return this.$store.state.updateState.zcfqState
      },
      userName: function () {
        if (!this.$store.state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return this.$store.state.user.info.user_name
      },
      userId: function () {
        return this.$store.state.user.info.roleid
      },
      branchName: function () {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function () {
        return this.$store.state.user.info.branchId
      },
      deptName: function () {
        return this.$store.state.user.info.parOrgName
      },
      deptId: function () {
        return this.$store.state.user.info.or_org_id
      }
    },
    created () {
      this.menuId = this.$store.state.tab.menuId
      if (this.$store.state.tab.uid) {
        console.log(this.$store.state.tab)
        this.isCreateOrUpdate = 'update'
        this.text = '编辑'
        this.searchDetail(this.$store.state.tab.uid)
      } else {
        this.isCreateOrUpdate = 'create'
        this.text = '新增'
        this.getMarkId()
      }
      console.log(this.text)
    }
  }
</script>

